svg 元素可以触发 svg 元素的点击事件吗？

新手问题在这里。

我想知道是否有可能触发其下方元素（路径，圆圈等）的“点击”事件，如果它们覆盖了鼠标坐标？最好在打字稿中通过使用d3.js库。

例如，考虑有两个圆圈（一个小圆圈在 z 位置上比一个大圆圈大），并且在单击时都显示一条消息。我希望如果我在小圆圈内单击，则会出现其消息，然后也会显示较大圆圈的消息。

以下是我的例子[编辑：D3的更改版本]的HTML代码：

  circle { fill: lightgreen; stroke: #000; }

以下是相关的脚本：

var svg = d3.select("body").append("svg")

    .style("float", "left")

    .attr("width", 480)

    .attr("height", 480)

    .attr('pointer-events', 'all')

    .on("click", log("SVG"));

svg.append("circle")

    .attr('pointer-events', 'all')

    .attr("cx", 240)

    .attr("cy", 240)

    .attr("r", 200)

    .on("click", log("OUTER"));

svg.append("circle")

    .attr('pointer-event', 'all')

    .attr("cx", 240)

    .attr("cy", 240)

    .attr("r", 100)

    .on("click", log("INNER"));

var div = d3.select("body").append("div")

    .style("float", "left");

function log(message) {

  return function() {

    div.append("p")

        .text(message)

        .style("background", "#ff0")

      .transition()

        .duration(2500)

        .style("opacity", 1e-6)

        .remove();

  };

}

通过此代码，单击大圆圈将显示外部和SVG消息。单击小圆圈将显示内部和SVG消息，但我希望具有内部，外部和SVG序列。

[编辑：纠正了“传播”一词的误用]

我将元素的“指针事件”属性设置为“all”。我知道这使它们“非传递”，但我希望能够触发它们的事件，并触发它们下面的元素的事件。

或者，是否有任何好的方法可以获得覆盖给定坐标[X，Y]的svg元素列表（可以通过获得），以便可以手动触发它们各自的点击事件？d3.mouse

感谢您的帮助。